<template>
  <div>
      <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
      <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
    </div>
</template>

<script>
  import axios from '../../../utils/axiosConfig'
  import baseHost from '../../../api/baseHost'
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
    name: 'mark-down-info',
    data: function(){
      return {
        content:'',
        html:'',
        configs: {
        }
      }
    },
    components: {
      mavonEditor
    },
    methods: {
      // 将图片上传到服务器，返回地址替换到md中
      $imgAdd(pos, $file){
        var formdata = new FormData();
        formdata.append('file', $file);
        // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
        let uploadUrl = baseHost + '/file/handleFileUpload/';
        axios.post(uploadUrl, formdata, {headers: { 'Content-Type': 'multipart/form-data' },})
          .then((response)=>{
            this.$refs.md.$img2Url(pos, response.data.url);
          });

      },
      change(value, render){
        // render 为 markdown 解析后的结果
        this.html = render;
      },
      submit(){
        console.log(this.content);
        console.log(this.html);
        this.$message.success('提交成功！');
      }
    }
  }
</script>
<style scoped>
  .editor-btn{
    margin-top: 20px;
  }
</style>
